<template>
  <div class="member-home">
    <!-- 概览 -->
    <home-over-view></home-over-view>
    <!-- 收藏 -->
    <home-panel title="我的收藏">
      <goods-item
        v-for="item in collectGoods"
        :key="item.id"
        :goods="item"
      ></goods-item>
    </home-panel>
    <!-- 足迹 -->
    <home-panel title="我的足迹">
      <goods-item
        v-for="item in footGood"
        :key="item.id"
        :goods="item"
      ></goods-item
    ></home-panel>
    <!-- 喜欢 -->
    <goods-relevant></goods-relevant>
  </div>
</template>
<script>
import HomePanel from "./components/HomePanel.vue";
import HomeOverView from "./components/HomeOverView.vue";
import GoodsRelevant from "../../goods/components/GoodsRelevant.vue";
import GoodsItem from "../../goods/components/GoodsItem.vue";
import { findCollect, footGoods } from "api/member";
import { ref } from "vue";
export default {
  name: "MemberHome",
  components: { HomeOverView, HomePanel, GoodsRelevant, GoodsItem },
  setup() {
    const collectGoods = ref([]);
    //模拟接口
    findCollect({
      page: 1,
      pageSize: 4,
    }).then((data) => {
      collectGoods.value = data.result.items;
    });
    //同理可以写足迹
    const footGood = ref([]);
    footGoods({
      page: 1,
      pageSize: 4,
    }).then((data) => {
      footGood.value = data.result.items;
    });
    return { collectGoods, footGood };
  },
};
</script>
<style scoped lang="less">
:deep(.xtx-carousel) .carousel-btn.prev {
  left: 5px;
}
:deep(.xtx-carousel) .carousel-btn.next {
  right: 5px;
}
</style>